{% extends 'generic/object_retrieve.html' %}

{% block title %}{{ object }} - Config{% endblock %}

{% block content %}
    {% include 'inc/ajax_loader.html' %}
    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <div class="card">
                <div class="card-header"><strong>Device Configuration</strong></div>
                <ul class="nav nav-tabs mt-16" role="tablist">
                    <li class="nav-item" role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="running">
                        <pre class="m-16" id="running_config"></pre>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="startup">
                        <pre class="m-16" id="startup_config"></pre>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="candidate">
                        <pre class="m-16" id="candidate_config"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: "{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_config",
                dataType: 'json',
                success: function(json) {
                    $('#running_config').html($.trim(json['get_config']['running']));
                    $('#startup_config').html($.trim(json['get_config']['startup']));
                    $('#candidate_config').html($.trim(json['get_config']['candidate']));
                },
                error: function(xhr) {
                    alert(xhr.responseText);
                }
            });
        });
    </script>
{% endblock javascript %}
